<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>异步编程和事件循环 | 上课讲义</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/tingweipeng/assets/style.f3d4564a.css">
    <link rel="modulepreload" href="/tingweipeng/assets/app.bfa3a24a.js">
    <link rel="modulepreload" href="/tingweipeng/assets/ajax_day04.md.0ca703d2.lean.js">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f44a984a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f44a984a data-v-a50780ff><div class="VPNavBar has-sidebar" data-v-a50780ff data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle has-sidebar" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/tingweipeng/" data-v-d5925166><!--[--><!--]--><!----><!--[-->上课讲义<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/webapis/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->webapis<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/js进阶/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->js进阶<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/ajax/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/vue基础/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->vue基础<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6f1d18b5 data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6f1d18b5 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-f44a984a data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-f44a984a data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup" data-v-a186aa16 data-v-6e45c352><div class="title" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>ajax</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>01-初识ajax</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day02.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>02-表单提交</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/ajax/day03.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>03-xhr和promise</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link active" href="/tingweipeng/ajax/day04.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>04-异步编程和事件循环</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f44a984a data-v-d981fe29><div class="VPDoc has-sidebar has-aside" data-v-d981fe29 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _tingweipeng_ajax_day04" data-v-cfb513e0><div><h1 id="异步编程和事件循环" tabindex="-1">异步编程和事件循环 <a class="header-anchor" href="#异步编程和事件循环" aria-hidden="true">#</a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-hidden="true">#</a></h2><ol><li>掌握async和await使用</li><li>掌握事件循环概念和执行顺序</li><li>完成案例-个人信息修改</li></ol><h2 id="概念-async和await" tabindex="-1">概念-async和await <a class="header-anchor" href="#概念-async和await" aria-hidden="true">#</a></h2><h3 id="目标" tabindex="-1">目标 <a class="header-anchor" href="#目标" aria-hidden="true">#</a></h3><p>掌握async和await的使用</p><h3 id="复习promise链式调用" tabindex="-1">复习Promise链式调用 <a class="header-anchor" href="#复习promise链式调用" aria-hidden="true">#</a></h3><p>回顾下, 前面使用Promise链式调用解决回调地狱的代码</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 使用Promise的链式调用解决问题</span></span>
<span class="line"><span style="color:#8B949E;">// 前提: axios函数在原地返回的就是一个Promise对象</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> pname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/province&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 获取某个省, 对应的城市列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    pname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data[</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">];</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/city?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 获取某个市, 对应的地区列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> cname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/area?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}&amp;cname=${</span><span style="color:#C9D1D9;">cname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>其实.then后, 也不便于阅读, 不太直观知道return返回到下一个then去使用 。所以, ES8新出了关键字async和await尝试解决这个问题</p><h3 id="async-await" tabindex="-1">async await <a class="header-anchor" href="#async-await" aria-hidden="true">#</a></h3><p>async 和 await 是 ES2017 中提出来的</p><p>async 和 await 两个关键字的出现，<strong>简化的</strong> <strong>Promise</strong> <strong>的使用</strong></p><p>async 用于修饰一个 function</p><p>await 只能出现在 async 函数内</p><p>async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。</p><h3 id="async-await语法" tabindex="-1">async await语法 <a class="header-anchor" href="#async-await语法" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">函数名</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> Promise对象</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 拿到Promise对象内成功的结果继续向下执行</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-hidden="true">#</a></h3><p>写个小例子, 来使用下async+await</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 掌握下async和await语法</span></span>
<span class="line"><span style="color:#8B949E;">// 目的: 用await取代then函数, 来提取成功的值在原地</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;成功的值&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">2000</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 普通函数: async+await</span></span>
<span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> p</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数: async+await</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">result</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> p</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(result)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ol><li><p>async和await的作用是什么?</p><details><summary>答案</summary><ul><li>取代then函数, 来提取Promise的值</li></ul></details></li></ol><h2 id="概念-async和await-注意事项" tabindex="-1">概念-async和await-注意事项 <a class="header-anchor" href="#概念-async和await-注意事项" aria-hidden="true">#</a></h2><h3 id="目标-1" tabindex="-1">目标 <a class="header-anchor" href="#目标-1" aria-hidden="true">#</a></h3><p>了解async和await的注意事项</p><h3 id="注意事项" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项" aria-hidden="true">#</a></h3><ol><li><p>await 必须用在async修饰的函数内</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 1. await必须用在被async修饰的函数内, 函数内无await, 则async可省略</span></span>
<span class="line"><span style="color:#8B949E;">// 报错: await is only valid in async functions</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></li><li><p>async修饰后, 此函数为异步函数</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 在此函数内, 遇到await会暂停代码往下, 但不影响外面继续执行同步流程</span></span>
<span class="line"><span style="color:#8B949E;">// 等所有主线程同步代码走完, 再执行await并继续向下</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">3</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></li><li><p>await之后一般跟promise对象</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">123</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li><li><p>await不能捕获失败结果, 需要使用try+catch关键字捕获</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">/*</span></span>
<span class="line"><span style="color:#8B949E;">    try和catch语法</span></span>
<span class="line"><span style="color:#8B949E;">    try {</span></span>
<span class="line"><span style="color:#8B949E;">        // 这里放可能在执行中报错的代码</span></span>
<span class="line"><span style="color:#8B949E;">        // 如果报错会终止代码继续执行, 直接跳转进catch里执行</span></span>
<span class="line"><span style="color:#8B949E;">    } catch (err) {</span></span>
<span class="line"><span style="color:#8B949E;">        // err接收try大括号内报错抛出的异常代码</span></span>
<span class="line"><span style="color:#8B949E;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#8B949E;">*/</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// resolve(1)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">reject</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">Error</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;失败&#39;</span><span style="color:#C9D1D9;">))</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">2000</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">try</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> p</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">    } </span><span style="color:#FF7B72;">catch</span><span style="color:#C9D1D9;"> (err) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">error</span><span style="color:#C9D1D9;">(err)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">myFn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div></li></ol><h3 id="小结-1" tabindex="-1">小结 <a class="header-anchor" href="#小结-1" aria-hidden="true">#</a></h3><ol><li><p>await后面的值都可以是什么?</p><details><summary>答案</summary><ul><li>可以是Promise对象或者一个基础类型的值, 但常配合Promise对象使用, 提取其成功的结果</li></ul></details></li><li><p>await想要捕获Promise内失败结果怎么做?</p><details><summary>答案</summary><ul><li>使用try和catch代码块进行捕获</li></ul></details></li></ol><h2 id="案例-优化回调地狱" tabindex="-1">案例-优化回调地狱 <a class="header-anchor" href="#案例-优化回调地狱" aria-hidden="true">#</a></h2><h3 id="目标-2" tabindex="-1">目标 <a class="header-anchor" href="#目标-2" aria-hidden="true">#</a></h3><p>使用Promise的链式调用解决问题</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 前提: axios函数在原地返回的就是一个Promise对象</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> pname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/province&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 获取某个省, 对应的城市列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    pname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data[</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">];</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/city?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 3. 获取某个市, 对应的地区列表</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> cname </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> res.data.data[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/area?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}&amp;cname=${</span><span style="color:#C9D1D9;">cname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>改进后</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 目标: 使用Promise的链式调用解决问题</span></span>
<span class="line"><span style="color:#8B949E;">// 前提: axios函数在原地返回的就是一个Promise对象</span></span>
<span class="line"><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">provinces</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net/api/province&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">pname</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> provinces.data.data[</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">citys</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/city?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">cname</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> citys.data.data[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">areas</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`http://ajax-api.itheima.net/api/area?pname=${</span><span style="color:#C9D1D9;">pname</span><span style="color:#A5D6FF;">}&amp;cname=${</span><span style="color:#C9D1D9;">cname</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> areas</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="案例-重构分类导航" tabindex="-1">案例-重构分类导航 <a class="header-anchor" href="#案例-重构分类导航" aria-hidden="true">#</a></h2><h3 id="目标-3" tabindex="-1">目标 <a class="header-anchor" href="#目标-3" aria-hidden="true">#</a></h3><p>使用async和await重构案例</p><h3 id="讲解" tabindex="-1">讲解 <a class="header-anchor" href="#讲解" aria-hidden="true">#</a></h3><p>把之前代码复制过来, 把Promise的then全换成async+await形式提取结果并使用</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;案例_分类导航&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-sizing</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">border-box</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-decoration</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#333</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">list-style</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.container</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">980</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.top</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">80</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">align-items</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">justify-content</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">space-around</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">position</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">relative</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.top</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.top</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">li</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">solid</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">transparent</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.top</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">li</span><span style="color:#79C0FF;">:hover</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">border-color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#27ba9b</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#27ba9b</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.top</span><span style="color:#FF7B72;">&gt;</span><span style="color:#7EE787;">li</span><span style="color:#79C0FF;">:hover</span><span style="color:#FF7B72;">&gt;</span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">opacity</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">scale</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">position</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">absolute</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">80</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rgba</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0.1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">align-items</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">opacity</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">scale</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform-origin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">top</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">all</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0.3</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.1</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">120</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">center</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">14</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding-top</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">8</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">span</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.sub</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">li</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">60</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">60</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">vertical-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">middle</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;top&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- &lt;li&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;a href=&quot;javascript:;&quot;&gt;首页&lt;/a&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;ul class=&quot;sub&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;li&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;a href=&quot;javascript:;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">              &lt;span&gt;砂锅厨具&lt;/span&gt;</span></span>
<span class="line"><span style="color:#8B949E;">              &lt;img src=&quot;https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&amp;imageView&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">            &lt;/a&gt;</span></span>
<span class="line"><span style="color:#8B949E;">          &lt;/li&gt;</span></span>
<span class="line"><span style="color:#8B949E;">        &lt;/ul&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;/li&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">ul</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 利用 async 与 await 关键字 优化 Promise.then 的写法</span></span>
<span class="line"><span style="color:#C9D1D9;">    axios.defaults.baseURL </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getMenus</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 先获取顶级分类</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">topData</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;/api/category/top&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(topData)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 给获取第一个顶级分类下面所有的二级分类</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[0].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[1].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[2].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[3].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[4].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[5].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[6].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[7].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[8].id } })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// Promise.all([Promise对象1,Promise对象2.....])</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const arr = [axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[0].id } }), axios.get(&#39;/api/category/sub&#39;, { params: { id: topData[1].id } }),]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(arr)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// map 返回值 是数组 对数组里面的元素进行映射</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 根据</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ajaxArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> topData.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> axios.</span><span style="color:#D2A8FF;">get</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;/api/category/sub&#39;</span><span style="color:#C9D1D9;">, { params: { id: item.id } }))</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 利用 Promise.all([Promise对象1.....]) 执行所有的Promise对象 返回值 Promise对象 状态和值 </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(Promise.all(ajaxArr))</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">.</span><span style="color:#D2A8FF;">all</span><span style="color:#C9D1D9;">(ajaxArr)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 通过 map 方法遍历 得到字符串 </span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#top&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(item.data.data)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">children</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> item.data.data</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;li&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;a href=&quot;javascript:;&quot;&gt;${</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/a&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;ul class=&quot;sub&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">              ${</span><span style="color:#C9D1D9;">children</span><span style="color:#A5D6FF;">.</span><span style="color:#D2A8FF;">map</span><span style="color:#A5D6FF;">(</span><span style="color:#79C0FF;">sub</span><span style="color:#A5D6FF;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#A5D6FF;"> </span><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">                </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;li&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                    &lt;a href=&quot;javascript:;&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                      &lt;span&gt;${</span><span style="color:#C9D1D9;">sub</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/span&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                      &lt;img src=&quot;${</span><span style="color:#C9D1D9;">sub</span><span style="color:#A5D6FF;">.</span><span style="color:#C9D1D9;">picture</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                    &lt;/a&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                  &lt;/li&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">                `</span></span>
<span class="line"><span style="color:#C9D1D9;">              }</span><span style="color:#A5D6FF;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#A5D6FF;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#A5D6FF;">)</span><span style="color:#A5D6FF;">}</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;/ul&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/li&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">getMenus</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br></div></div><h3 id="小结-2" tabindex="-1">小结 <a class="header-anchor" href="#小结-2" aria-hidden="true">#</a></h3><ol><li><p>如果同时有多个Promise请求, 我们把await写在哪里?</p><details><summary>答案</summary><ul><li>把await 写在Promise.all()的左边, 对大的Promise对象进行结果的等待</li></ul></details></li></ol><h2 id="概念-eventloop事件循环" tabindex="-1">概念-EventLoop事件循环 <a class="header-anchor" href="#概念-eventloop事件循环" aria-hidden="true">#</a></h2><h3 id="目标-4" tabindex="-1">目标 <a class="header-anchor" href="#目标-4" aria-hidden="true">#</a></h3><p>理解浏览器中的EventLoop（事件循环）的概念</p><h3 id="什么是eventloop" tabindex="-1">什么是EventLoop <a class="header-anchor" href="#什么是eventloop" aria-hidden="true">#</a></h3><p>JavaScript 是一门<strong>单线程</strong>执行的脚本语言。也就是说，同一时间只能做一件事情。</p><p>javaScript要运行在<strong>宿主</strong>环境中（浏览器，nodejs）下。浏览器内部有执行js代码的引擎(V8引擎)</p><ol><li>同步任务由 JavaScript 主线程依次来执行</li><li>异步任务委托给宿主环境（浏览器）执行</li><li>已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行</li><li>JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数</li><li>次序执行 JavaScript 主线程不断重复上面的第 4 步</li></ol><p><img src="/tingweipeng/assets/事件循环.9c27a843.png" alt="" data-fancybox="gallery"></p><p>排队是任务是以事件及其回调的方式存在的。</p><p>当事件（用户的点击，图片的成功加载）发生时，将其回调添加到任务队列；主线程上的任务完成之后，就会从任务队列中取出任务来执行，</p><h3 id="话术" tabindex="-1">话术 <a class="header-anchor" href="#话术" aria-hidden="true">#</a></h3><p>浏览器中的EventLoop（这个比较偏理论一点，我是这样理解的）：js是单线程的，一次只能做一件事。js在浏览器这个宿主环境中运行。浏览器是多线程的，用户交互，定时器，网络请求等等浏览器中的事件会产生对应的任务，任务多了要在任务队列中排队，浏览器的主线程依次取出任务来执行，此过程不断重复从而形成一个<strong>循环</strong>，称为eventLoop。</p><h2 id="异步代码的执行过程" tabindex="-1">异步代码的执行过程 <a class="header-anchor" href="#异步代码的执行过程" aria-hidden="true">#</a></h2><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;"> console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(()</span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }, </span><span style="color:#79C0FF;">2000</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>先执行同步代码，并输出结果；</p><p>遇到异步代码之后，交由浏览器（宿主环境）处理 ===&gt; 事件触发之后进入到任务队列</p><p>继续执行后续代码；</p><p>主线程<strong>空闲时</strong>，从任务队列中取出任务继续执行；</p><h2 id="new-promise-是同步任务" tabindex="-1">new Promise 是同步任务 <a class="header-anchor" href="#new-promise-是同步任务" aria-hidden="true">#</a></h2><h3 id="目标-5" tabindex="-1">目标 <a class="header-anchor" href="#目标-5" aria-hidden="true">#</a></h3><p>能够知道new Promise是同步任务</p><h3 id="讲解-1" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-1" aria-hidden="true">#</a></h3><p>new Promise 和 new 其他对象一样，是同步任务</p><p>获取结果时（调用 resolve 触发 then方法时）是异步的</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">}).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>new Promise时，传入的函数会自动执行</p><p>所以代码基本上是按顺序执行的</p><p>但是 resolve 函数属于异步任务，它最后执行</p><p>所以输出顺序是：1、2、3、5、4</p><h2 id="概念-微任务和宏任务" tabindex="-1">概念-微任务和宏任务 <a class="header-anchor" href="#概念-微任务和宏任务" aria-hidden="true">#</a></h2><h3 id="目标-6" tabindex="-1">目标 <a class="header-anchor" href="#目标-6" aria-hidden="true">#</a></h3><ul><li>了解<strong>微任务</strong>和<strong>宏任务</strong>的概念</li><li>掌握<strong>微任务队列</strong>和<strong>宏任务队列</strong>的执行时机</li></ul><h3 id="异步任务" tabindex="-1">异步任务 <a class="header-anchor" href="#异步任务" aria-hidden="true">#</a></h3><p>不是马上执行，是放入到队列中等待； 如果所有的任务都要按序等待，那么也不行，需要有一个能插队的机制。所以又将异步任务分为微任务和宏任务，同时对应微任务队列和宏任务队列。</p><p>当主线程空闲时，先执行微任务队列中的任务，再去执行宏任务队列中的任务。</p><p><a href="https://zhuanlan.zhihu.com/p/498370214" target="_blank" rel="noreferrer">https://zhuanlan.zhihu.com/p/498370214</a></p><p><img src="/tingweipeng/assets/image-20230209213819622.44c690bf.png" alt="image-20230209213819622" data-fancybox="gallery"></p><p>小明和小红同时去银行办理业务</p><p>小明办理银行卡（宏任务）---&gt; 激活一下手机银行、200W购买银行理财产品（微任务）</p><p>小红办理银行卡</p><h3 id="微任务队列和宏任务队列" tabindex="-1">微任务队列和宏任务队列 <a class="header-anchor" href="#微任务队列和宏任务队列" aria-hidden="true">#</a></h3><p>微任务代码（js语法）</p><ul><li>Promise对象.then()</li></ul><p>宏任务代码（宿主环境）</p><ul><li>script标签</li><li>dom事件</li><li>ajax</li><li>setTimout</li></ul><p>宏任务：上一个宏任务执行完, 才会考虑执行下一个宏任务</p><p>微任务: 当前宏任务执行完，在下一个宏任务开始之前需要执行的任务</p><h3 id="示例-1" tabindex="-1">示例 <a class="header-anchor" href="#示例-1" aria-hidden="true">#</a></h3><p>阅读如下代码执行结果</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    p.</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="/tingweipeng/assets/1668172160487-65a3d51d-cd30-4504-9f8b-f6375669675e.457a359e.png" alt="image.png" data-fancybox="gallery"></p><h2 id="案例-经典面试题" tabindex="-1">案例-经典面试题 <a class="header-anchor" href="#案例-经典面试题" aria-hidden="true">#</a></h2><h3 id="目标-7" tabindex="-1">目标 <a class="header-anchor" href="#目标-7" aria-hidden="true">#</a></h3><ul><li><p>通过如下几道面试题, 学会如何读代码的执行流程</p></li><li><p>1</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">p</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1000</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 标记为成功</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    p.</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></li><li><p>2</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">7</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">8</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">9</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div></li><li><p>3</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></li><li><p>4</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">  })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></li><li><p>5</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;p1&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;setTimeout2&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;p2&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;setTimeout1&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(data)</span></span>
<span class="line"><span style="color:#C9D1D9;">  })</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></li><li><p>6</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fnOne</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fnTwo</span><span style="color:#C9D1D9;">(); </span><span style="color:#8B949E;">// 右结合先执行右侧的代码, 然后等待</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fnTwo</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">fnOne</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">2000</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">reject</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> { </span><span style="color:#8B949E;">// new Promise()里的函数体会马上执行所有代码</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">7</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">8</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    p.</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">9</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;"> &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">11</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">12</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">((</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">13</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      p.</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res);</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">15</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">14</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div></li><li><p>7 今日头条面试题</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">async1</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;1&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">async2</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;2&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">async2</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;3&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;4&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;5&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  }, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">async1</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">Promise</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">resolve</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;6&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">resolve</span><span style="color:#C9D1D9;">();</span></span>
<span class="line"><span style="color:#C9D1D9;">  }).</span><span style="color:#D2A8FF;">then</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;7&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">  });</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;8&#39;</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div></li></ul><h3 id="小结-3" tabindex="-1">小结 <a class="header-anchor" href="#小结-3" aria-hidden="true">#</a></h3><ol><li><p>代码如何执行?</p><details><summary>答案</summary><ul><li>先执行第一个宏任务, 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕</li></ul></details></li></ol><h2 id="案例-个人信息修改" tabindex="-1">案例-个人信息修改 <a class="header-anchor" href="#案例-个人信息修改" aria-hidden="true">#</a></h2><h3 id="目标-8" tabindex="-1">目标 <a class="header-anchor" href="#目标-8" aria-hidden="true">#</a></h3><p>完成案例相关需求 <img src="/tingweipeng/assets/1668172220917-b5c8e02b-002f-4507-829f-aae9a7988c6e.9f71da48.gif" alt="个人信息修改.gif" data-fancybox="gallery"></p><h3 id="讲解-2" tabindex="-1">讲解 <a class="header-anchor" href="#讲解-2" aria-hidden="true">#</a></h3><ol><li>新建html, 完成演示效果中的所有效果</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;08.案例_个人信息修改&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.form-select</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">103</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">inline-block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.col-form-label</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">right</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.figure-img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">#upload</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-5&quot;</span><span style="color:#C9D1D9;">&gt;个人设置&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-6&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;昵称：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control col-9&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;nickname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;籍贯：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;province&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--省--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;city&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--市--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;area&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--区--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;头像：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control col-9&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;hidden&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;avatar&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">figure</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;upload&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg&quot;</span></span>
<span class="line"><span style="color:#C9D1D9;">              </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure-img img-fluid rounded&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;...&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">figcaption</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure-caption&quot;</span><span style="color:#C9D1D9;">&gt;修改头像&lt;/</span><span style="color:#7EE787;">figcaption</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">figure</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-3&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;">&gt;保存&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://unpkg.com/bootstrap@5.1.3/dist/js/bootstrap.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br></div></div><ol start="2"><li>落地的js代码</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;08.案例_个人信息修改&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">link</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rel</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;stylesheet&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.min.css&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.form-select</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">103</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">inline-block</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.col-form-label</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-align</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">right</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.figure-img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">height</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">#upload</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;container&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;p-5&quot;</span><span style="color:#C9D1D9;">&gt;个人设置&lt;/</span><span style="color:#7EE787;">h1</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-6&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;昵称：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control col-9&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;text&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;nickname&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;籍贯：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;province&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--省--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;city&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--市--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-select col-4&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;area&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">value</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;&quot;</span><span style="color:#C9D1D9;">&gt;--区--&lt;/</span><span style="color:#7EE787;">option</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">select</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-form-label col-3&quot;</span><span style="color:#C9D1D9;">&gt;头像：&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;form-control col-9&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;hidden&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;avatar&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">figure</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">input</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">type</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;file&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;upload&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg&quot;</span></span>
<span class="line"><span style="color:#C9D1D9;">              </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure-img img-fluid rounded&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">alt</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;...&quot;</span><span style="color:#C9D1D9;"> /&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">            &lt;</span><span style="color:#7EE787;">figcaption</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;figure-caption&quot;</span><span style="color:#C9D1D9;">&gt;修改头像&lt;/</span><span style="color:#7EE787;">figcaption</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;/</span><span style="color:#7EE787;">figure</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;row mb-3&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-3&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">label</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;col-9&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">          &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn btn-primary&quot;</span><span style="color:#C9D1D9;">&gt;保存&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">        &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">form</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/bootstrap.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/axios.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">src</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;./lib/form-serialize.js&quot;</span><span style="color:#C9D1D9;">&gt;&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 设置基地址</span></span>
<span class="line"><span style="color:#C9D1D9;">    axios.defaults.baseURL </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;http://ajax-api.itheima.net&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 获取dom元素</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">nicknameDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;[name=nickname]&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">ProDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;[name=province]&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">cityDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;[name=city]&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">areaDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;[name=area]&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">img</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;img&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 定义函数 </span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getInfo</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax请求 多级对象解构  对象名.属性名</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#79C0FF;">area</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">avatar</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">city</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">nickname</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">province</span><span style="color:#C9D1D9;"> } } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/settings&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送请求获取到所有的省</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">provinceArr</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/province&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      ProDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option&gt;--省--&lt;/option&gt;&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> provinceArr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;option value=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&lt;/option&gt;`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送请求获取省下面指定的市</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cityArr</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/city&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          pname: province</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      cityDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option&gt;--市--&lt;/option&gt;&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> cityArr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;option value=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&lt;/option&gt;`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送请求获取省下面指定的区县</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">areaArr</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/area&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          pname: province,</span></span>
<span class="line"><span style="color:#C9D1D9;">          cname: city</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      areaDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option&gt;--区县--&lt;/option&gt;&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> areaArr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;option value=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&lt;/option&gt;`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(area, avatar, city, nickname, province)</span></span>
<span class="line"><span style="color:#C9D1D9;">      nicknameDom.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> nickname</span></span>
<span class="line"><span style="color:#C9D1D9;">      ProDom.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> province</span></span>
<span class="line"><span style="color:#C9D1D9;">      cityDom.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> city</span></span>
<span class="line"><span style="color:#C9D1D9;">      areaDom.value </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> area</span></span>
<span class="line"><span style="color:#C9D1D9;">      img.src </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> avatar</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">getInfo</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 当省份发生改变时 需要获取到对应的市 写入到市里面  change</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> pro </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">    ProDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      areaDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option value&gt;--区县--&lt;/option&gt;&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(this.value) </span></span>
<span class="line"><span style="color:#C9D1D9;">      pro </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.value</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax 获取 省下面所有的市</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">cityArr</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/city&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          pname: pro</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(cityArr)</span></span>
<span class="line"><span style="color:#C9D1D9;">      cityDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option&gt;--市--&lt;/option&gt;&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> cityArr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;option value=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&lt;/option&gt;`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    cityDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">city</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.value</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">areaArr</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">        url: </span><span style="color:#A5D6FF;">&#39;/api/area&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        params: {</span></span>
<span class="line"><span style="color:#C9D1D9;">          pname: pro,</span></span>
<span class="line"><span style="color:#C9D1D9;">          cname: city</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      areaDom.innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;&lt;option&gt;--区县--&lt;/option&gt;&#39;</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> areaArr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`&lt;option value=&quot;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&quot;&gt;${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}&lt;/option&gt;`</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 给img 标签 注册 click 事件  触发 文件选择框的 click</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">uploadDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#upload&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    img.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      uploadDom.</span><span style="color:#D2A8FF;">click</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需要给 uploadDom 注册 change 事件</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    uploadDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;change&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">file</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.files[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// console.log(file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 实例化 Fd对象</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fd</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">new</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">FormData</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      fd.</span><span style="color:#D2A8FF;">append</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;avatar&#39;</span><span style="color:#C9D1D9;">, file)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax 到服务器</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">try</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: { </span><span style="color:#79C0FF;">url</span><span style="color:#C9D1D9;"> } } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">          url: </span><span style="color:#A5D6FF;">&#39;/api/file&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          method: </span><span style="color:#A5D6FF;">&#39;post&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          data: fd</span></span>
<span class="line"><span style="color:#C9D1D9;">        })</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(url)</span></span>
<span class="line"><span style="color:#C9D1D9;">        img.src </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> url</span></span>
<span class="line"><span style="color:#C9D1D9;">      } </span><span style="color:#FF7B72;">catch</span><span style="color:#C9D1D9;"> (error) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// Promise.reject(new Error(error))</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">alert</span><span style="color:#C9D1D9;">(error)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 点击保存按钮需要将修改后的数据发送给服务器</span></span>
<span class="line"><span style="color:#C9D1D9;">    document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.btn&#39;</span><span style="color:#C9D1D9;">).</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">async</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">e</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 阻止默认行为</span></span>
<span class="line"><span style="color:#C9D1D9;">      e.</span><span style="color:#D2A8FF;">preventDefault</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 获取数据 serialize 只能获取 表单的里面的 表单元素 </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">serialize</span><span style="color:#C9D1D9;">(document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;form&#39;</span><span style="color:#C9D1D9;">), { hash: </span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;"> })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 给对象添加属性</span></span>
<span class="line"><span style="color:#C9D1D9;">      data.avatar </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> img.src</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 发送ajax </span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">try</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">await</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">axios</span><span style="color:#C9D1D9;">({</span></span>
<span class="line"><span style="color:#C9D1D9;">          url: </span><span style="color:#A5D6FF;">&#39;/api/settings&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          method: </span><span style="color:#A5D6FF;">&#39;put&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          data</span></span>
<span class="line"><span style="color:#C9D1D9;">        })</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res)</span></span>
<span class="line"><span style="color:#C9D1D9;">      } </span><span style="color:#FF7B72;">catch</span><span style="color:#C9D1D9;"> (error) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;错误消息&#39;</span><span style="color:#C9D1D9;">, error)</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br></div></div><h3 id="小结-4" tabindex="-1">小结 <a class="header-anchor" href="#小结-4" aria-hidden="true">#</a></h3><ol><li>实现任何需求的思路是?</li></ol><ul><li>先标签后样式, 再数据铺设/绑定事件, 根据画面拆分需求按步骤实现, 前端准备好就调用接口</li></ul><h2 id="今日重点-必须会" tabindex="-1">今日重点(必须会) <a class="header-anchor" href="#今日重点-必须会" aria-hidden="true">#</a></h2><ol><li>掌握async和await的使用</li><li>理解EventLoop和宏任务微任务执行顺序</li><li>独立完成个人信息修改案例</li></ol><h2 id="今日作业-必完成" tabindex="-1">今日作业(必完成) <a class="header-anchor" href="#今日作业-必完成" aria-hidden="true">#</a></h2><h3 id="作业1-整理笔记" tabindex="-1">作业1-整理笔记 <a class="header-anchor" href="#作业1-整理笔记" aria-hidden="true">#</a></h3><ol><li>把今天知识点梳理一遍, 记好笔记</li></ol><h3 id="作业2-案例" tabindex="-1">作业2-案例 <a class="header-anchor" href="#作业2-案例" aria-hidden="true">#</a></h3><ol><li>课上案例至少再写一遍</li></ol><h3 id="作业3-答题" tabindex="-1">作业3-答题 <a class="header-anchor" href="#作业3-答题" aria-hidden="true">#</a></h3><ol><li>10道选择题(祝你得100分): <a href="https://ks.wjx.top/vm/mBkPVuv.aspx" target="_blank" rel="noreferrer">https://ks.wjx.top/vm/mBkPVuv.aspx</a></li></ol><h3 id="作业4-每日反馈" tabindex="-1">作业4-每日反馈 <a class="header-anchor" href="#作业4-每日反馈" aria-hidden="true">#</a></h3><p>关注微信群里的, 每日反馈</p><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function#%E5%B0%9D%E8%AF%95%E4%B8%80%E4%B8%8B" target="_blank" rel="noreferrer">async和await的mdn讲解</a></p></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><a class="pager-link prev" href="/tingweipeng/ajax/day03.html" data-v-21f75714><span class="desc" data-v-21f75714>Previous page</span><span class="title" data-v-21f75714>03-xhr和promise</span></a></div><div class="has-prev pager" data-v-21f75714><!----></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"ajax_day02.md\":\"e35eca52\",\"ajax_day03.md\":\"585e2c65\",\"ajax_day04.md\":\"0ca703d2\",\"ajax_index.md\":\"2b437449\",\"index.md\":\"ff5d4089\",\"js进阶_day02.md\":\"24ed742a\",\"js进阶_day03.md\":\"f0d3d414\",\"js进阶_day04.md\":\"d30bb382\",\"js进阶_index.md\":\"c6d77850\",\"vue基础_day02.md\":\"5f8c856e\",\"vue基础_day03.md\":\"7cd8d83f\",\"vue基础_index.md\":\"05339e1f\",\"webapis_day02.md\":\"0ca07905\",\"webapis_day03.md\":\"80c6b805\",\"webapis_day04.md\":\"6159ddb6\",\"webapis_day05.md\":\"fdfba8b3\",\"webapis_day06.md\":\"aaece170\",\"webapis_index.md\":\"8bdb89a3\"}")</script>
    <script type="module" async src="/tingweipeng/assets/app.bfa3a24a.js"></script>
    
  </body>
</html>